<template>
  <a-row
    type="flex"
    align="middle"
    class="animate__animated animate__fadeInLeft"
    style="flex-wrap: nowrap; height: 100%; transiton: all 0.6s"
  >
    <a-col>
      <!-- logo -->
      <div class="logo" @click="$router.replace('/home')">
        <img
          src="/logo.png"
          alt="logo"
          :style="{ marginRight: '12px' }"
          width="32"
          height="32"
        />
        <span class="title">码 酷</span>
        <menu-unfold-outlined
          class="menu_icon"
          :style="{
            fontSize: '20px',
            cursor: 'pointer',
          }"
          @click.stop="showDrawer"
        />
      </div>
    </a-col>
    <a-col class="h-menu">
      <!-- 菜单 -->
      <Menu />
    </a-col>
    <a-col flex="auto">
      <div class="right">
        <a-input-search
          v-model:value="searchKey"
          placeholder="全站搜索编程资源"
          enter-button
          size="large"
          @search="onSearch"
          :style="{
            minWidth: '200px',
          }"
        />
        <a-dropdown placement="bottomRight" :overlayStyle="{ minWidth: '56px'}">
          <a-tooltip placement="topLeft">
            <template #title v-if="!state.isLogin">
              <span>登录后，享全部功能</span>
            </template>
            <a-avatar
              :size="{ xs: 32, sm: 32, md: 40, lg: 40 }"
              class="avatarRes"
              :src="state.isLogin ? 'https://joeschmoe.io/api/v1/random' : ''"
              @click="login"
            >
              <template #icon><UserOutlined /></template>
            </a-avatar>
          </a-tooltip>
          <template #overlay v-if="state.isLogin">
            <a-menu @click="handleMenuClick">
              <a-menu-item key="1" :style="itemStyle">
                <template #icon>
                  <user-outlined :style="f_14" />
                </template>
                个人中心
              </a-menu-item>
              <a-menu-item key="2" :style="itemStyle">
                <template #icon>
                  <bell-outlined :style="f_14" />
                </template>
                消息中心
              </a-menu-item>
              <a-menu-divider />
              <a-menu-item key="3" :style="[{color: 'red'}, itemStyle ]">
                <template #icon>
                  <login-outlined :style="f_14" />
                </template>
                退出登录
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </a-col>
  </a-row>
  <a-drawer
    placement="left"
    :closable="false"
    :visible="visible"
    width="208"
    :bodyStyle="{
      padding: 0,
    }"
    @close="onClose"
  >
    <!-- 侧边菜单 -->
    <Menu mode="inline" @closeMenu="onClose"/>
  </a-drawer>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  MenuUnfoldOutlined,
  UserOutlined,
  LoginOutlined,
  BellOutlined,
} from "@ant-design/icons-vue";
import Menu from "../components/Menu.vue";

const { state } = useStore();
const router = useRouter();

let data = reactive({
  searchKey: "",
  visible: false,
  itemStyle: { padding: "12px" },
  f_14: { fontSize: '14px' }
});

let { searchKey, visible, itemStyle,f_14 } = toRefs(data);

function showDrawer() {
  visible.value = true;
}

function onClose() {
  visible.value = false;
}

function onSearch(searchVal) {
  console.log(searchVal);
}

function handleMenuClick({ key }) {
  console.log(key);
}

function login() {
  state.isLogin || router.push("/login");
}
</script>

<style scoped>
.logo {
  width: 120px;
  height: 31px;
  cursor: pointer;
  transition: all 0.3s;
}
.logo .title {
  font-size: 18px;
}
.h-menu {
  width: 35vw;
  transition: all 0.3s;
}
.logo .menu_icon {
  margin: 0 10px 0 5px;
  display: none;
  cursor: pointer;
}

.right,
.logo {
  display: flex;
  align-items: center;
}
.avatarRes {
  margin-left: 10px;
  cursor: pointer;
  flex-shrink: 0;
}

@media screen and (max-width: 568px) {
  .logo {
    width: fit-content;
  }
  .logo .title {
    display: none;
  }
  .h-menu {
    display: none;
  }
  .logo .menu_icon {
    display: block;
  }
}
</style>